<template>
  <div class="dashboard-page">
    <!-- 侧边栏 -->
    <Sidebar />

    <!-- 主内容区域 -->
    <div class="dashboard-content">
      <h1>欢迎来到仪表盘</h1>

      <!-- 显示 token -->
      <div v-if="token" class="token-display">
        <h3>您的 JWT Token:</h3>
        <p>{{ token }}</p>
      </div>

      <!-- 显示管理员统计信息 -->
      <div class="stats-container">
        <div class="stat-item">
          <h2>总订单数</h2>
          <p>{{ totalOrders }}</p>
        </div>
        <div class="stat-item">
          <h2>活跃用户数</h2>
          <p>{{ activeUsers }}</p>
        </div>
        <div class="stat-item">
          <h2>总收入</h2>
          <p>\${{ totalRevenue.toFixed(2) }}</p>
        </div>
      </div>

      <!-- 模拟图表显示 -->
      <div class="chart-container">
        <h3>本月订单统计</h3>
        <div class="chart-placeholder">
          <p>图表将在这里显示（可集成 Chart.js 或其他图表库）</p>
        </div>
      </div>

      <!-- 登出按钮 -->
      <button @click="handleLogout" class="logout-button">登出</button>
    </div>
  </div>
</template>

<script>
// 引入 Sidebar 组件
import Sidebar from '../components/Sidebar.vue';

export default {
  components: {
    Sidebar,
  },
  data() {
    return {
      token: localStorage.getItem('authToken') || '',
      totalOrders: 1234,
      activeUsers: 567,
      totalRevenue: 89976.45,
    };
  },
  methods: {
    handleLogout() {
      localStorage.removeItem('authToken');
      this.$router.push('/login');
    },
  },
};
</script>

<style scoped>
.dashboard-page {
  display: flex;
}

.dashboard-content {
  margin-left: 250px; /* 假设侧边栏宽度是 250px */
  padding: 2rem;
  width: calc(100% - 250px); /* 留出侧边栏宽度 */
}

h1 {
  text-align: center;
  font-size: 2rem;
  color: #333;
}

/* 仪表盘内容的样式 */
.token-display {
  margin-top: 2rem;
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 统计信息容器 */
.stats-container {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
}

.stat-item {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 30%;
  text-align: center;
}

.stat-item h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.stat-item p {
  font-size: 1.25rem;
  font-weight: bold;
  color: #2ecc71;
}

.chart-container {
  margin-top: 3rem;
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.chart-placeholder {
  width: 100%;
  height: 200px;
  background-color: #ecf0f1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7f8c8d;
  font-size: 1.2rem;
}

.logout-button {
  margin-top: 2rem;
  padding: 0.75rem 2rem;
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.logout-button:hover {
  background-color: #c0392b;
}
</style>
